<template>
	<div class="box">
		<p>
			<input type="text" placeholder="用户名" v-model="state.user"/>
		</p>
		<p>
			<input type="text" placeholder="密码" v-model="state.pwd"/>
		</p>
		<p>
			<select v-model="state.role">
				<option :value="ele.value" v-for="ele in state.roleList" :key="ele.value">{{ ele.text }}</option>
			</select>
			<text>{{state.role}}</text>
		</p>
		<p>
			<input type="button" value="登录" @click="doLogin"/>
		</p>
	</div>
</template>

<script setup>

import {reactive} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router"

const store = useStore();
const router = useRouter()
const state = reactive({
	user: "adl",
	pwd: 123,
	role: "user",
	roleList: [
		{text: "老板", value: 'boss'},
		{text: "运维", value: 'manager'},
		{text: "维修", value: 'repair'}
	]
})

function doLogin(){
	//1.向后台发送请求且登陆成功
	//2.返回信息

	const context = {
		token:"9d7b39c8-da6a-47c6-8c8d-d29f2c8062f2",
		role:state.role
	}
	//console.log(context)
	//3.保存到vuex
	store.commit("login",context)
	//.log(store.state)

	//4.跳转后台
	//router.push(name:)
	router.replace({name: "Index"})
}

</script>

<style scoped>
.box{
	border: 1px solid #ddd;
	width: 300px;
	margin-top: 300px;
	/*左右居中*/
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
}
</style>